<template>
  <BackGround />
  <div class="container">
    <el-card>
      <el-row :gutter="0" class="row">
        <el-col :span="8" :offset="0">
          <div>图片数量</div>
          <div class="tip">{{album.photoCount}}</div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>大小</div>
          <div class="tip">{{album.size}}</div>
        </el-col>
        <el-col :span="8" :offset="0">
          <div>共享者</div>
          <div class="tip">{{album.permission==1?"全部可见":album.shareNum+"人"}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="row2">
        <el-col :span="24" :offset="0">相册名称:{{album.name}}</el-col>
      </el-row>
      <el-row :gutter="0" class="row2" @click="toUserInfo">
        <el-col :span="24" :offset="0">所属用户:{{albumUser.nickName}} <el-icon>
            <View />
          </el-icon>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="row2">
        <el-col :span="24" :offset="0">
          权限: <span>{{permissionType}}</span>&nbsp;
          <el-button v-show="userId==album.userId" type="primary" size="small"
            @click="this.permissionDialog=true">
            <el-icon>
              <setting />
            </el-icon>
          </el-button>
          <el-button v-show="album.permission==2&&userId==album.userId" type="primary" size="small"
            @click="this.permissionDialogCode=true">
            修改密码
          </el-button>
        </el-col>
      </el-row>
      <input id="shareLink" type="text" value="111" />
      <div v-show="permissionType=='共享'">
        <el-row :gutter="0" class="row2 share">
          <el-col :span="24" :offset="0">
            <div class="shareLink">{{shareLink}}&nbsp;
              <el-icon @click="copyShareLink">
                <CopyDocument />
              </el-icon>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="0" class="row2">
        <el-col :span="24" :offset="0">创建时间:{{album.createTime}}</el-col>
      </el-row>
      <el-row :gutter="0" class="row2">
        <el-col :span="24" :offset="0">更改时间:{{album.updateTime}}</el-col>
      </el-row>
      <el-input disabled v-model="album.remark" type="textarea" placeholder="无备注"
        :autosize="{ minRows: 1, maxRows: 5 }" />
    </el-card>
    <div class="row-line"></div>
    <el-card class="card2" v-if="album.userId==userId">
      <el-row>
        <el-col :span="6">
          <el-button type="primary" class="btn" circle
            :disabled="!(album.permission==1||album.permission==2)">
            <el-icon :size="30" @click="shareAlbum">
              <share />
            </el-icon>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="warning" class="btn" circle @click="editDialog=true">
            <el-icon :size="30">
              <edit />
            </el-icon>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="info" class="btn" circle @click="moveAlbum">
            <el-icon :size="30">
              <Rank />
            </el-icon>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="danger" class="btn" circle @click="deleteAlbum">
            <el-icon :size="30">
              <delete />
            </el-icon>
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="row-line"></div>
    <!-- 共享用户展示已经有的权限 -->
    <div class="myauth" v-show="album.userId!=userId">
      <el-checkbox v-model="myauth.query" label="查看" size="large" :disabled="!myauth.query" />
      <el-checkbox v-model="myauth.add" label="添加" size="large" :disabled="!myauth.add" />
      <!-- <el-checkbox v-model="myauth.update" label="移动" size="large" :disabled="!myauth.update" /> -->
      <el-checkbox v-model="myauth.delete" label="删除" size="large" :disabled="!myauth.delete" />
    </div>
    <!-- 共享用户列表 -->
    <div class="share-user-btn"
      v-show="album.permission==2&&userId==album.userId&&shareUser.length<=0">
      <el-button type="primary" @click="getShareUser">获取共享用户列表</el-button>
    </div>
    <div class="share-user">
      <div v-for="share in shareUser" :key="share.userId">
        <SwipeCell>
          <el-card class="share-user-card" body-style="padding:5px">
            <div class="share-user-inner">
              <div>
                <el-avatar :size="40" :src="share.headImage" />
                <span>{{share.nickName}}</span>
              </div>
              <div class="share-user-inner-bottom">
                <el-checkbox-button v-model="share.photoAuth.query"
                  @change="updateAuth(share.userId,'query')">
                  查看
                </el-checkbox-button>
                <!-- <el-checkbox-button v-model="share.photoAuth.update"
                  @change="updateAuth(share.userId,'update')">
                  移动
                </el-checkbox-button> -->
                <el-checkbox-button v-model="share.photoAuth.add"
                  @change="updateAuth(share.userId,'add')">
                  添加
                </el-checkbox-button>
                <el-checkbox-button v-model="share.photoAuth.delete"
                  @change="updateAuth(share.userId,'delete')">
                  删除
                </el-checkbox-button>
              </div>
            </div>
          </el-card>
          <template #right>
            <Button square text="删除" type="danger" class="delete-button"
              @click="deleteShareUser(share.userId)" />
          </template>
        </SwipeCell>
      </div>
    </div>
    <ShareSheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions"
      @select="onShareSelect" />
    <!-- 展现共享用户 -->

    <!-- 修改相册 -->
    <el-dialog v-model="editDialog" title="修改相册" :center="true" :show-close="false">
      <el-input type="text" v-model="album.name" placeholder="相册名称(0-10字符)" size="large"
        maxlength="20"><template #prepend>名称</template></el-input>
      <div style="height:20px"></div>
      <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 5 }" v-model="album.remark"
        placeholder="备注" size="large" maxlength="255">
        <template #prepend>备注</template>
      </el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog=false">取消</el-button>
          <el-button type="primary" @click="updateAlbum">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 移动相册列表 -->
    <el-dialog v-model="moveDialog" title="移动相册" :center="true" :show-close="false">
      <el-select v-model="moveObject.to" filterable placeholder="请选择移动到哪" size="large">
        <el-option v-for="item in albumList" :key="item.id"
          :label="item.id==moveObject.from?'当前相册':item.name" :value="item.id" />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="moveDialog=false">取消</el-button>
          <el-button type="primary" @click="moveAlbumEnter">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改相册类型 -->
    <el-dialog v-model="permissionDialog" title="修改类型" :center="true" :show-close="false">
      <el-radio-group v-model="permissionSelect">
        <el-radio v-if="!(album.permission==0)" :label="0" size="large">私有</el-radio>
        <el-radio v-if="!(album.permission==2)" :label="2" size="large">部分可见</el-radio>
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialog=false">取消</el-button>
          <el-button type="primary" @click="permissionAlbumEnter">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 部分可见添加密码 -->
    <el-dialog v-model="permissionDialog2" title="共享密码" :center="true" :show-close="false">
      <div style="height:20px"></div>
      <el-input type="text" v-model="code" placeholder="四位共享密码" size="large" maxlength="4" />
      <el-radio-group v-model="expireTime" class="ml-4">
        <el-radio :label="7" size="large">7天</el-radio>
        <el-radio :label="30" size="large">30天</el-radio>
        <el-radio :label="-1" size="large">永久</el-radio>
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialog2=false">取消</el-button>
          <el-button type="primary" @click="updatePermission2Server">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog v-model="permissionDialogCode" title="修改密码" :center="true" :show-close="false">
      <div @click="getShareAlbumCode">当前密码：{{shareAlbumCode}}&nbsp;
        <el-icon>
          <View />
        </el-icon>
      </div>
      <el-input type="text" v-model="code" placeholder="四位共享密码" size="large" maxlength="4" />
      <el-radio-group v-model="expireTime" class="ml-4">
        <el-radio :label="7" size="large">7天</el-radio>
        <el-radio :label="30" size="large">30天</el-radio>
        <el-radio :label="-1" size="large">永久</el-radio>
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialogCode=false">取消</el-button>
          <el-button type="primary" @click="updateShareAlbumCode">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { ShareSheet, SwipeCell, Button } from 'vant';
import { copyText, dateFormat, sizeFormat, userId } from "../../utils/index";
export default {
  name: "GAlbumVo",
  data () {
    return {
      albumId: "",
      permissionType: "",
      shareLink: "",
      album: {},
      albumUser: {},
      userId,
      editDialog: false,
      moveDialog: false,
      permissionDialog: false,
      permissionDialog2: false,
      permissionDialogCode: false,
      permissionSelect: null,
      albumList: [],
      expireTime: 30,
      code: null,
      shareAlbumCode: "****",
      moveObject: {
        from: null,
        to: null,
      },
      showShare: false,
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      shareUser: [],
      myauth: {
      }
    }
  },
  components: {
    ShareSheet, SwipeCell, Button
  },
  mounted () {
    this.albumId = this.$route.params.albumId;
    this.moveObject.from = this.albumId;
    this.getAlbumVo(this.albumId);
  },
  methods: {
    getAlbumVo (albumId) {
      this.$axios.get("/album/vo/" + albumId).then((res) => {
        if (res.flag) {
          console.log("AlbumVo->getAlbumVo()", res);
          if (res.data.permission == 0) this.permissionType = "私有";
          if (res.data.permission == 1) {
            this.permissionType = "全部可见";
            this.shareLink = window.location.host + "/#/photo/" + res.data.id;
          }
          if (res.data.permission == 2) {
            this.permissionType = "共享";
            this.shareLink = window.location.host + "/#/addshareuser/" + res.data.id;
          }
          if (res.data.userId != userId) {
            this.getShareUserAuth();
          }
          this.album = res.data;
          this.album.createTime = dateFormat(res.data.createTime, 1);
          this.album.updateTime = dateFormat(res.data.updateTime, 1);
          this.album.size = sizeFormat(res.data.size);
          return res;
        }
      }).then((res) => {
        if (res.flag) {
          this.getUserVo(res.data.userId);
        }
      })
    },
    getUserVo (userId) {
      this.$axios.get("/user/uservo/" + userId).then((res) => {
        if (res.flag) {
          console.log("ALbumVo->getUserVo()", res);
          this.albumUser = res.data;
        }
      })
    },
    //删除相册
    deleteAlbum () {
      ElMessageBox.confirm(
        '删除相册将删除全部图片',
        '删除相册',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          //确定
          this.$axios.delete("/album/" + this.albumId).then((res) => {
            console.log("AlbumVo->deleteAlbum", res);
            if (res.flag) {
              ElMessage({
                message: res.msg,
                grouping: true,
                type: 'success',
                duration: 2000,
              })
              this.$router.push("/albumview");
            }
          })
        })
        .catch(() => {

        });
    },
    updateAlbum () {
      this.$axios.put('/album', {
        id: this.album.id,
        name: this.album.name,
        permission: this.album.permission,
        remark: this.album.remark
      }).then((res) => {
        console.log("AlbumVo=>updateAlbum()", res);
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.editDialog = false;
        }
      })
    },
    //分享相册
    shareAlbum () {
      this.showShare = true;
    },
    //分享选择
    onShareSelect (option) {
      console.log(option);
      this.showShare = false;
      this.copyShareLink();
      ElMessage({
        message: "已复制作品链接,请到" + option.name + "中打开",
        grouping: true,
        type: 'success',
        duration: 2000,
      })
    },
    //移动相册
    moveAlbum () {
      this.moveDialog = true;
      this.$axios.get('/album/name').then((res) => {
        if (res.flag) {
          this.albumList = res.data;
        }
      })
    },
    //修改相册类型
    permissionAlbumEnter () {
      let confirMessage = "再次确认";
      if (this.permissionSelect == null) {
        ElMessage({
          message: "请选择正确选项",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      }
      if (this.permissionSelect == 0 && this.album.permission == 2) {
        confirMessage = "共享该相册的用户将被清除，再次确认";
      }

      if (this.permissionSelect == 2) {
        this.permissionDialog2 = true;
        return;
      }
      ElMessageBox.confirm(
        confirMessage,
        '修改相册类型',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          //确定
          this.$axios.put("/album/updatepermisson/" + this.albumId + "/" + this.permissionSelect).then((res) => {
            console.log("AlbumVo->permissionAlbumEnter", res);
            if (res.flag) {
              ElMessage({
                message: res.msg,
                grouping: true,
                type: 'success',
                duration: 2000,
              })
              this.getAlbumVo(this.albumId);
              this.permissionDialog = false;
            }
          })
        })
        .catch(() => {

        });
    },
    //修改为部分可见
    updatePermission2Server () {
      this.$axios.put("/album/share/updatepermission",
        {
          "albumId": this.albumId,
          "code": this.code,
          "expireTime": this.expireTime
        }).then(res => {
          if (res.flag) {
            ElMessage({
              message: res.msg,
              grouping: true,
              type: 'success',
              duration: 2000,
            });
            this.getAlbumVo(this.albumId);
            this.permissionDialog = false;
            this.permissionDialog2 = false;
          }
        })
    },
    moveAlbumEnter () {
      this.$axios.put("/album/move/" + this.moveObject.from + "/" + this.moveObject.to).then((res) => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.moveDialog = false;
        }
      })
    },
    //修改分享连接密码
    updateShareAlbumCode () {
      this.$axios.post("/album/share/updatecode", {
        "albumId": this.albumId,
        "code": this.code,
        "expireTime": this.expireTime
      }).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.getShareAlbumCode();
        }
      })
    },
    //获取共享相册密码
    getShareAlbumCode () {
      this.$axios.get("/album/share/code/" + this.albumId).then(res => {
        if (res.flag) {
          if (res.data == null) {
            this.shareAlbumCode = "密码已过期请重新设置";
          } else {
            this.shareAlbumCode = res.data;
          }
        }
      })
    },
    //获取用户共享权限
    getShareUserAuth () {
      this.$axios.get("/album/share/shareuserauth/" + this.albumId).then(res => {
        if (res.flag) {
          this.myauth = res.data;
        }
      })
    },
    //获取共享用户列表
    getShareUser () {
      this.$axios.get("/album/share/shareuser/" + this.albumId).then(res => {
        if (res.flag) {
          this.shareUser = res.data;
          if (res.data.length < 1) {
            ElMessage({
              message: "共享用户者为0",
              grouping: true,
              type: 'success',
              duration: 2000,
            });
          }
        }
      })
    },
    //共享共享用户权限
    updateAuth (userId, auth) {
      this.$axios.put("/album/share/updateauth/" + this.albumId + "/" + userId + "/" + auth).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
        }
      })
    },
    //删除共享用户
    deleteShareUser (userId) {
      this.$axios.delete("/album/share/deleteshare/" + this.albumId + "/" + userId).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.getShareUser();
        }
      })
    },
    copyShareLink () {
      var content = document.getElementById('shareLink');
      copyText(content, this.shareLink);
    },
    copyShareLink1 (text) {
      var content = document.getElementById('shareLink');
      copyText(content, text);
    },
    toUserInfo () {
      this.$router.push('/user/info/' + this.albumUser.id)
    }
  },
}
</script>

<style scoped>
.container {
  padding: 10px;
  padding-top: 20px;
}
.row {
  text-align: center;
}
.tip {
  margin-top: 5px;
  font-size: 20px;
}
.row2 {
  margin: 5px;
  height: 30px;
  line-height: 30px;
}
.share {
  margin: 5px;
  margin-bottom: 30px;
}
.shareLink {
  word-wrap: break-word;
}
#shareLink {
  position: fixed;
  left: 10000px;
}
.card2 {
  text-align: center;
  border-radius: 100px;
}
.btn {
  width: 50px;
  height: 50px;
}
.share-user-btn {
  padding-top: 5px;
  text-align: center;
}
.share-user-card {
  margin-top: 5px;
}
.share-user-inner {
  position: relative;
  width: 100%;
}
.share-user-inner-bottom {
  float: right;
  margin-bottom: 5px;
}
.myauth {
  text-align: center;
}
</style>